<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="titleBar">
      <view class="searchBar">
        <view class="searchBox">
          <input
            class="searchInput"
            :value="prodName"
            confirm-type="search"
            placeholder="输入关键字搜索"
            :placeholder-style="{ color: '#666', fontSize: '20rpx' }"
            @input="getSearchContent"
            @confirm="toSearchConfirm"
          />
          <image class="icon" src="@/static/images/search.png" />
        </view>
        <view class="btnSearch" @tap="onStartSearch">搜索</view>
        <!-- <view class="search-list-img" @tap="changeShowType">
          <image v-if="showType == 1" src="@/static/images/icon/search-col.png" />
          <image v-if="showType == 2" src="@/static/images/icon/search-col2.png" />
        </view> -->
      </view>

      <view class="tabs">
        <text :class="'tab-item complete ' + (searchTabs == 0 ? 'on' : '')" data-sts="0" @tap="onStsTap">综合</text>
        <text :class="'tab-item ' + (searchTabs == 1 ? 'on' : '')" data-sts="1" @tap="onStsTap">销量</text>
        <text :class="'tab-item ' + (searchTabs == 2 ? 'on' : '')" data-sts="2" @tap="onStsTap">价格</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="list">
      <!-- 每行两列 -->
      <view class="column1" v-if="showType == 1">
        <view class="item">
          <block v-for="(item, index) in searchProdList" :key="index">
            <production :item="item" sts="6" />
          </block>
        </view>
      </view>

      <!-- 每行一列 -->
      <view class="column2" v-if="showType == 2">
        <block v-for="(item, index) in searchProdList" :key="index">
          <view class="item" :data-prodid="item.prodId" @tap="toProdPage">
            <view class="icon">
              <image class="pic" :src="item.pic" />
            </view>
            <view class="content">
              <view class="goodsName">{{ item.prodName }}</view>
              <view class="describe">{{ item.brief ? item.brief : '--' }}</view>
              <!-- <view class="cate-prod-info">{{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评</view> -->
              <view class="price">
                <text class="symbol">￥</text>
                <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text>
                <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text>
              </view>
            </view>
          </view>
        </block>
      </view>

      <view class="empty" v-if="!searchProdList.length">暂无数据</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const wxs = number();
const prodName = ref('');
const cityName = ref('深圳市');

onLoad((options) => {
  prodName.value = options.prodName;
});

onShow(() => {
  getCityStorage();
  getList();
});

const getCityStorage = () => {
  let city = uni.getStorageSync('CityName');
  if (city) cityName.value = city;
};

const showType = ref(1);
const changeShowType = () => {
  if (showType.value == 1) {
    showType.value = 2;
  } else {
    showType.value = 1;
  }
};

/**
 * 输入商品获取数据
 * @param e
 */
const getSearchContent = (e) => {
  prodName.value = e.detail.value;
};

const searchTabs = ref(0);
const searchProdList = ref([]);

const getList = () => {
  http
    .request({
      url: '/search/searchProdPage',
      method: 'GET',
      data: {
        current: 1,
        size: 10,
        prodName: prodName.value,
        sort: searchTabs.value,
        city: cityName.value
      }
    })
    .then(({ data }) => {
      searchProdList.value = data.records;
    });
};

const toSearchConfirm = (e) => {
  console.log('搜索：', prodName.value /* , e.detail.value */);
  if (prodName.value) {
    let recentSearch = uni.getStorageSync('recentSearch') || [];
    recentSearch = recentSearch.filter((item) => item !== prodName.value);
    recentSearch.unshift(prodName.value);
    if (recentSearch.length > 10) {
      recentSearch.pop();
    }
    uni.setStorageSync('recentSearch', recentSearch);
  }
  uni.redirectTo({
    url: '/pages/index/searchList/searchList?prodName=' + prodName.value
  });
};

const onStartSearch = () => {
  toSearchConfirm();
};

const onStsTap = (e) => {
  searchTabs.value = e.currentTarget.dataset.sts;
  getList();
};

const toProdPage = (e) => {
  uni.navigateTo({
    url: '/pages/index/productInfo/productInfo?productId=' + e.currentTarget.dataset.prodid
  });
};
</script>

<style scoped lang="scss">
@import './searchList.scss';
</style>
